<!--
 * @Author: your name
 * @Date: 2021-09-10 16:29:22
 * @LastEditTime: 2021-09-11 23:05:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \backstage-management-system\system\src\views\pm\add.vue
-->
<template>
  <div>
    <div class="select"><span>筛选查询</span><span><el-button @click="$router.go(-1)">取消</el-button> 
    <el-button @click="submitForm" :disabled="disabled" :loading="disabled">保存</el-button></span></div>
    <div class="headbox">
      <template>
        <div >
           <el-form :model="userinfo" ref="formRef" label-width="100px">
          <el-form-item label="项目编号：" prop="number" :rules="[{ required: true, message: '必须为数字' }]">
            <el-input type="text" v-model.number="userinfo.number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="项目名称：" prop="name" :rules="[{ required: true, message: '不能为空' }]">
            <el-input type="text" v-model="userinfo.name" autocomplete="off"></el-input>
          </el-form-item>
           <el-form-item label="项目描述：" prop="introduce" :rules="[{ required: true, message: '不能为空' }]">
            <el-input type="text" v-model="userinfo.introduce" autocomplete="off"></el-input>
          </el-form-item>
          </el-form>
        </div>
      </template>
      <template>
        <div><span>项目负责人：</span>
          <el-button type="text" @click="dialogFormVisible = true"
            ><div class="person">点击选择</div></el-button
          >

          <el-dialog title="选择人员" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="部门A" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="部门B" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="部门C" :label-width="formLabelWidth">
                 <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
      </template>
      <template>
        <div><span>技术负责人：</span>
          <el-button type="text" @click="dialogFormVisible = true"
            ><div class="person">点击选择</div></el-button
          >

          <el-dialog title="选择人员" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="部门A" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="部门B" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="部门C" :label-width="formLabelWidth">
                 <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
      </template>
      <template>
        <div><span>产品负责人：</span>
          <el-button type="text" @click="dialogFormVisible = true"
            ><div class="person">点击选择</div></el-button
          >

          <el-dialog title="选择人员" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="部门A" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="部门B" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="部门C" :label-width="formLabelWidth">
                 <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
      </template>
      <template>
        <div><span>测试负责人：</span>
          <el-button type="text" @click="dialogFormVisible = true"
            ><div class="person">点击选择</div></el-button
          >

          <el-dialog title="选择人员" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="部门A" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="部门B" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="部门C" :label-width="formLabelWidth">
                 <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
      </template>
      <template>
        <div><span>市场负责人：</span>
          <el-button type="text" @click="dialogFormVisible = true"
            ><div class="person">点击选择</div></el-button
          >

          <el-dialog title="选择人员" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="部门A" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="部门B" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="部门C" :label-width="formLabelWidth">
                 <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
      </template>
      <template>
        <div class="block">
          <span class="demonstration">项目开始日期：</span>
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
      </template>
      <template>
        <div class="block">
          <span class="demonstration">项目截止日期：</span>
          <el-date-picker v-model="value2" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      disabled:false,
      options: [],
      value: [],
      list: [],
      states: [],
       userinfo: {
        number: '必须为数字',
        name: '请填写20字以内项目名称',
        introduce:'请填写20字以内项目描述' ,
        designation:'',
        current:'',
        state:'',
        date:''
        
      },
      value1: "",
      value2: "",
      dialogFormVisible: false,
      form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
    };
  },
  mounted() {
    this.list = this.states.map((item) => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  },
  methods: {
    submitForm() {
      this.$refs['formRef'].validate(async (valid) => {
        if (valid) {
          // 验证通过
          this.disabled = true

          // ajax请求
          let ret = await this.$store.dispatch('user/addUserAction', this.userinfo)
          // 请求数据失败
          console.log(ret);
          if (ret) {
            this.$message.success({
              message: '添加用户成功',
              duration: 1500,
              onClose: () => this.$router.replace('/admin/pm'),
            })
          } else {
            this.$message.error('添加用户失败')
          }
        } else {
          this.$message.error('添加用户失败')
          return false
        }
      })
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.headbox {
  box-sizing: border-box;
  border: 1px solid #b4b4b4;
  border-top: 0;
  margin: 0 0 0 30px;
  padding: 20px;
  font-size: 12px;
  color: #b4b4b4;
  background-color: #fff;
}
.select {
  margin: 30px 0 0 30px;
  background-color: rgba(242, 242, 242, 1);
  padding: 20px;
  display: flex;
  justify-content: space-between;

}
input {
  width: 400px;
  margin: 10px;
  outline: none;
  
}
input::-webkit-input-placeholder {
  font-size: 12px;
  color: #b4b4b4;
}
.block {
  margin: 10px;
  width: 400px;
}
.person{
    border: 1px dotted gray;
    padding: 10px 20px;
    color: #63B9BE;
    font-size: 12px;
}
</style>